
import React from 'react';
import {inject, observer} from 'mobx-react';
import { WeaErrorPage, WeaTop,WeaTab,WeaRightMenu,WeaNewScroll} from 'ecCom';
import {Row,Button,Spin} from 'antd';
import RightContainer from './RightContainer';
const ButtonGroup = Button.Group;
import WorkPlanCreate from '../../public/workPlanCreate/index';
import WorkPlanImport from '../../public/workPlanImport/index';
import {observable,action,toJS} from 'mobx';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject('workPlanViewListStore')
@observer
class WorkPlanViewListNew extends React.Component {
  constructor(props) {
		super(props);
		this.state={
		}
  }
  componentDidMount() {
		const {doInit} = this.props.workPlanViewListStore;
    doInit();
 }
  componentWillReceiveProps(nextProps) {
		if(nextProps.location && this.props.location.key !== nextProps.location.key) {
			const {doInit} = this.props.workPlanViewListStore;
			doInit();
		}
	}
  componentWillUnmount() {
		//组件卸载时一般清理一些状态
		const { setParams } = this.props.workPlanViewListStore;
		setParams({exportExcelUrl: ''});// 解决切换页面重复下载附件的问题
	}
	
	getcreateConditionParams = () => {
		return this.props.workPlanViewListStore && this.props.workPlanViewListStore.status && this.props.workPlanViewListStore.status.createConditionParams;
	}

	workPlanCreateClose = () => {
		let { close  } = this.props.workPlanViewListStore;
		close();
	}

	workPlanCreateOnlyClose = () => {
		let { onlyClose } = this.props.workPlanViewListStore;
		onlyClose();
	}

	workPlanImportClose = () => {
		let { closeImport  } = this.props.workPlanViewListStore;
		closeImport();
	}

  render() {
		// let {status,getRightMenu,onRightMenuClick,changeTimeType,close,onlyClose,open,importVisible,closeImport,exportExcelUrl,exportExcel,setDialogHeight,exportExcel4Html,exportListBtnTitle} = this.props.workPlanViewListStore;
		let {status,close,onlyClose,importVisible,closeImport,exportExcelUrl,exportExcel,exportListBtnTitle,doInit,changeGetCalendarData} = this.props.workPlanViewListStore;
    // const {loading,timeType,userList,createVisible,createType,workPlanId,createConditionParams,selectedUser,activeKey,spinning} = toJS(status)
		const {loading,createVisible,createType,workPlanId,createConditionParams,selectedUser,activeKey,spinning} = toJS(status);
    let btns = [
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ul5f8n@doCreate`} type="primary" key={'doCreate'} disabled={false} onClick={this.doCreate}>{getLabel(18481,'新建日程')}</Button>),
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ryp2vi@doImport`} type="primary" key={'doImport'} disabled={false} onClick={this.doImport}>{getLabel(384890,'导入日程')}</Button>),
	];
	btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8jg81c@exportExcelExcel`} type="primary" key={'exportExcel-excel'} disabled={false} onClick={() => exportExcel('excel')}>{getLabel(28343,'导出Excel')}</Button>);	
	btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@souedp@exportExcelList`} type="primary" key={'exportExcel-list'} title={exportListBtnTitle} disabled={false} onClick={() => exportExcel('list')}>{getLabel(501903,'导出日程清单')}</Button>);	
	let buttonsCreate = [
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dtum8j@doSave`} type="primary" disabled={false} onClick={()=>{this.refs.customWorkPlanCreate.refs.workPlanCreate.returnValues()}}>{getLabel(30986,'保存')}</Button>),
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hp2sed@doClose`} type="primary" disabled={false} onClick={()=>{this.refs.customWorkPlanCreate.doClose()}}>{getLabel(309,'关闭')}</Button>),
	];
	let breadcrumb = this.getBreadcrumb()
	// setDialogHeight(0)	
    return (
    	<div className="workPlan-myWorkPlan" id="workPlan-myWorkPlan-id">
    		<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@xirxrn`} className="workPlan-workplanViewListNew-rightMenu" datas={this.getRightMenu(btns)} >
					<div style={{width:'100%' }}>
							<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@h332gy`} 
								loading={spinning} 
								icon={<i className='icon-coms-schedule' />} 
								iconBgcolor='#7734FF' 
								title={getLabel(27910,'所有日程')}  
								buttons={btns}
								showDropIcon={false}
								// dropMenuDatas={getRightMenu()}
								// onDropMenuClick={onRightMenuClick()}
								breadcrumb={breadcrumb}
								>
								<div style={{overflow:'hidden',height:'100%'}}>
									<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@r1cdtz`} className="workPlan-myWorkPlan-left-right" style={{minWidth:'1066px',height:'100%'}}>
										{/* <RightContainer isAllWorkPlan = {true} > */}
										<RightContainer ecId={`${this && this.props && this.props.ecId || ''}_RightContainer@4qz5ua`}  >
										</RightContainer>
									</Row>
								</div>
							</WeaTop>
					</div>
				</WeaRightMenu>
				<WorkPlanCreate ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanCreate@t718d1`}
				  type={createType}//新建为'create',查看为'preview',编辑edit,共享share
				  visible={createVisible}//显隐受控
					doClose={this.workPlanCreateClose}//关闭回调
					onlyClose={this.workPlanCreateOnlyClose}//关闭回调,只做关闭操作
					workPlanId = {workPlanId} //日程id，查看日程时用到
					createConditionParams = {this.getcreateConditionParams()}//创建的默认值日期和时间,没有传[]
					activeKey = {activeKey} //查看页面显示的面板1是基本信息，7是相关交流
					changeTab = {this.changeTab}//查看页面切换面板的回调
					selectUser = {selectedUser}//新建日程的创建人id
					workPlanTypeOptions = ''//客户模块的新建日程，普通新建传'',客户新建传3
					crmIDs = {''}//通过客户模块新建日程，并自动带出相关客户,[{'id':'','name':''}]
					description =''//客户模块需求，支持新建时传入的'基本信息-内容'
					doInit={changeGetCalendarData}//日程一览表刷新
				/>
				<WorkPlanImport ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanImport@xtz9dn`}
					visible = {importVisible}
					doClose={this.workPlanImportClose}//关闭回调
					doInit={changeGetCalendarData}//日程一览表刷新

				/>
			<iframe name="exportExcel" src={exportExcelUrl} style={{display:'none'}}></iframe>
    	</div>
    )
	}

	getRightMenu = (btns) => {
		let rightMenu = [];
		Array.isArray(btns) && btns.map(res => {
			let icon = res.key === "doCreate" ? 'icon-coms-Add-to' : 'icon-coms-download';
			if(res.key === "doImport") {
				icon = 'icon-coms-export';
			}
			if(res.props) {
				rightMenu.push({
					key: res.key,
					disabled: res.props.disabled,
					icon: <i className={icon} />,
					content: res.props.children,
					onClick: res.props.onClick
				});
			}
		})
		return rightMenu;
	}

	getBreadcrumb = ()=>{
    let {status,changeSelectedUser,doUpdateCalender} = this.props.workPlanViewListStore
		let {selectedUser,selectedUserName} = toJS(status)
		let breadcrumb = [
			{
				name: getLabel(33959,'日程一览表'),
				onClick: () => {changeSelectedUser('','');selectedUser=='' && doUpdateCalender(true)},
			},
		];
		return breadcrumb 
	}
	changeTab = (e)=>{
		this.props.workPlanViewListStore.changeTab(e)
	}
	doCreate = ()=>{
		const {open} = this.props.workPlanViewListStore;
		let e = [];
		let date = new Date();
		let dateString = this.changeDateFormat(date);
		let timeString = date.toString().split(' ')[4].split(':',2).join(':')
		e[2] = dateString;
		e[3] = timeString;
		e[4] = dateString;
		open('create','',e);
	}
	// doPreview = ()=>{
  // 	const {open} = this.props.workPlanViewListStore
	// 	open('preview');
		
	// }
	doImport = ()=>{
  	const {openImport} = this.props.workPlanViewListStore
		openImport();
	}
	changeDateFormat = data => {
		if(typeof(data)==='string' && data!=''){
			return data
		}
		//日期格式转为yyyy-MM-dd
		let now = data || new Date();
		let year = now.getFullYear();
		let month =(now.getMonth() + 1).toString();
		let day = (now.getDate()).toString();
		if (month.length == 1) {
			month = "0" + month;
		}
		if (day.length == 1) {
			day = "0" + day;
		}
		let dateString =  year + "-" + month + "-" + day;
		return dateString;
	}
}

export default WorkPlanViewListNew
